<template>
	<view>
		<template v-if="dataSource && dataSource.length">
			<view class="inforamtion" style="display: flex;" v-for="(item, index) in dataSource" :key="index">
				<view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">故障</view>
						<view class="rl">{{ item.fault }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">维修项目</view>
						<view class="rl">{{ item.maintenanceItems }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">维修金额</view>
						<view class="rl">{{ item.maintenanceMoney }}</view>
					</view>
					<view class="option" style="width: 520rpx;">
						<view class="lf">备注</view>
						<view class="rl">{{ item.remark }}</view>
					</view>
				</view>
				<view style="flex: 1; display: flex; align-items: center; justify-content: flex-end;">
					<u-icon name="edit-pen-fill" color="#2979ff" size="20" @click="onEdit(item, index)"></u-icon>
					<u-line direction="col" length="20" margin="0 10rpx"></u-line>
					<u-icon name="trash-fill" color="#2979ff" size="20" @click="onDelete(item, index)"></u-icon>
				</view>
			</view>
		</template>
		<view v-else>
			<u-empty mode="data" text="暂无数据" icon="/static/empty/data.png"></u-empty>
		</view>
		<view style="margin: 20rpx 20rpx 0rpx 20rpx;">
			<u-button text="新增" type="primary" @click="onAdd"></u-button>
		</view>

		<!-- 弹窗表单 -->
		<view @touchmove.stop.prevent="stopScroll">
			<u-popup :show="showPopupInput" @close="closePopupInput" :round="10">
				<view style="background-color: #ffffff; border-radius: 10px; padding: 30rpx;" >
					<u--form :rules="rules" labelPosition="top" :model="model" ref="form" labelWidth="auto" :labelStyle="{
					fontSize: '14px',
					color: '#B2B2B2',
					lineHight: '20px'
				}">
						<u-form-item label="故障" prop="fault" :borderBottom="false" ref="item1">
							<u--input v-model="model.fault" placeholder="请输入故障" border="surround"
								:suffixIconStyle="{color: '#B2B2B2'}"></u--input>
						</u-form-item>
						<u-form-item label="维修项目" prop="maintenanceItems" :borderBottom="false" ref="item1" required>
							<u--input v-model="model.maintenanceItems" placeholder="请输入维修项目" border="surround"
								:suffixIconStyle="{color: '#B2B2B2'}"></u--input>
						</u-form-item>
						<u-form-item label="维修金额(元)" prop="maintenanceMoney" :borderBottom="false" ref="item1" required>
							<h-money-input placeholder="请输入维修金额" v-model="model.maintenanceMoney"></h-money-input>
						</u-form-item>
						<u-form-item label="备注" prop="remark" :borderBottom="false" ref="item1">
							<u--textarea v-model="model.remark" confirmType="done" placeholder="请输入备注"
								:maxlength="500"></u--textarea>
						</u-form-item>
					</u--form>
					<view style="padding:20rpx 0;">
						<u-button text="确定" type="primary" @click="onConfirmPopupInput"></u-button>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: {
				type: Array,
				default: () => ([])
			}
		},
		data() {
			return {
				showPopupInput: false, // 表单弹窗
				model: {
					fault: '', //故障
					maintenanceItems: '', //维修项目
					maintenanceMoney: '', //维修金额
					remark: '', //备注
				},
				rules: {
					maintenanceItems: [{
						required: true,
						message: '请输入维修项目!',
						trigger: 'change'
					}],
					maintenanceMoney: [{
						required: true,
						message: '请输入维修金额!',
						trigger: 'change'
					}],
				},
				dataSource: JSON.parse(JSON.stringify(this.dataList)),
				editIndex: 0, // 编辑的下标
				isEdit: false,
			};
		},
		watch: {
			dataList: {
				handler: function(val){
					this.dataSource = JSON.parse(JSON.stringify(val))
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			stopScroll () {
				return false
			},
			onAdd() {
				this.isEdit = false
				this.showPopupInput = true
			},
			// 编辑
			onEdit(item, index) {
				this.isEdit = true
				this.editIndex = index
				this.model = {
					...item
				}
				this.showPopupInput = true
			},
			// 删除
			onDelete(item, index) {
				var _this = this
				uni.showModal({
					content: '确定删除吗？',
					success(res) {
						if (res.confirm) {
							_this.dataSource.splice(index, 1);
						} else if (res.cancel) {
							// 用户点击取消
						}
					}
				})

			},
			closePopupInput() {
				this.model = {
					fault: '', //故障
					maintenanceItems: '', //维修项目
					maintenanceMoney: '', //维修金额
					remark: '', //备注
				}
				this.showPopupInput = false
			},
			async onConfirmPopupInput() {
				const val = await this.$refs.form.validate()
				if (!val) return
				if (!this.isEdit) {
					this.dataSource.push(this.model)
				} else {
					this.dataSource[this.editIndex] = this.model
				}
				this.closePopupInput()
			},
			getData() {
				return this.dataSource
			}
		}
	};
</script>

<style lang="scss" scoped>
	.inforamtion {
		margin-top: 10rpx;
		padding: 10rpx;
		border-radius: 15rpx;
		box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.1);
	}
</style>